<template>
   <div id="contractManagement">
<!--     头部-->
<!--     <header>
       <h3>万事达-TMS客户端</h3>
       <div>发票管理</div>
     </header>-->
     <TmsHeader :tmsheader="tmsheader"></TmsHeader>
<!--     搜素功能模块-->
     <div id="gongNeng">
       <div class="gongNeng_first">
         <el-select v-model="value" placeholder="收货人" class="shouHuo">
           <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
           </el-option>
         </el-select>
         <el-input class="input" v-model="input" placeholder="请输入内容"></el-input>

         <el-select v-model="value2" placeholder="下单时间" class="xiaDan">
           <el-option
               v-for="item in options2"
               :key="item.value2"
               :label="item.label"
               :value="item.value2">
           </el-option>
         </el-select>

         <!--       时间选择-->
         <div class="block">
           <el-date-picker
               v-model="value1"
               type="date"
               placeholder="开始日期">
           </el-date-picker>
         </div>
         <div class="line">-</div>
         <div class="block">
           <el-date-picker
               v-model="value1"
               type="date"
               placeholder="结束日期">
           </el-date-picker>
         </div>
<!--         搜素框-->
         <el-button type="primary" icon="el-icon-search" class="search">搜索</el-button>
       </div>
<!--       功能第二排-->
       <div class="gongNeng_second">
         <ul id="gongNengS">
           <li class="active">全部 ()</li>
           <li>已开发票 ()</li>
           <li>未开发票 ()</li>
           <li>申请中 ()</li>
         </ul>
       </div>
       <!--       功能第3排-->
       <div>
         <el-button type="info" @click="shenQing">申请发票</el-button>
         <el-button type="info" @click="chaKan">查看详情</el-button>
       </div>
     </div>
<!--     table模块-->
     <div class="table">
       <el-table
           ref="multipleTable"
           :data="currPageData"
           tooltip-effect="dark"
           style="width: 100%"
           @selection-change="handleSelectionChange">
         <el-table-column
             type="selection"
             width="55">
         </el-table-column>
         <el-table-column
             prop="name"
             label="订单编号"
             width="120">
         </el-table-column>
         <el-table-column
             label="下单日期"
             width="120">
           <template slot-scope="scope">{{ scope.row.date }}</template>
         </el-table-column>
         <el-table-column
             prop="name"
             label="合同编号"
             width="120">
         </el-table-column>
         <el-table-column
             prop="address"
             label="始发地"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="目的地"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="收货方"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="货物名称"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="始发地"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="重量KG"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="运输费"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="结算时间"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="开票状态"
             show-overflow-tooltip>
         </el-table-column>
         <el-table-column
             prop="address"
             label="开票金额"
             show-overflow-tooltip>
         </el-table-column>
       </el-table>
<!--    分页   -->
       <el-pagination
           class="fenYe"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage1"
           :page-sizes="[1, 2, 3, 4]"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="tableData.length">
       </el-pagination>
     </div>
   </div>
</template>

<script>
import TmsHeader from '../../TmsHeader'
export default {
  name: "ContractManagement2",
  components: {TmsHeader},
  data() {
    return {
      tmsheader:{
        tmsBigTitle: "承运商端",
        tmsATitle: "发票管理",
        tmsBTitle: "发票总览",
      },
      options: [{
        value: '选项1',
        label: '收货人'
      }, {
        value: '选项2',
        label: '始发地'
      }, {
        value: '选项3',
        label: '目的地'
      }, {
        value: '选项4',
        label: '订单号'
      }, {
        value: '选项5',
        label: '货名'
      },{
        value: '选项6',
        label: '合同编号'
      }
      ],
      options2:[
        {
          value2: '选项11',
          label: '下单时间'
        },{
          value2: '选项12',
          label: '报价有效期'
        }
      ],
      value: '',
      input:'',
      value1: '',
      value2: '',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普518 弄'
      }],
      multipleSelection: [],
      currentPage1:1,
      currentPage4: 4,
      pageSize:3,
      currPageData:[],
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val+"2222222333");
    },
    // 监听pagesize 改变的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(val);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    //监听页码改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currPageData = this.tableData.slice((val-1)*this.pageSize,val*this.pageSize);
    },
    shenQing(){
      this.$router.push('./kaiPiao2')
    },
    chaKan(){
      this.$router.push('./detail2')
    }
  },
  mounted() {
    this.currPageData = this.tableData.slice(0,this.pageSize);

  }


}
</script>

<style scoped>
header{
  text-align: left;
  /*border:1px solid;*/
}
#gongNeng{
  margin-top:10px;
  /*border:1px solid;*/
  text-align: left;
}
.gongNeng_first{
  display: flex;

}
.gongNeng_second{
  margin:10px 0;
}
.shouHuo{
  margin-right:10px;
}
.xiaDan,.search{
  margin-left: 20px;
}

.input{
  height: 40px;
  width: 260px;
}
.line{
  font-size: 30px;
}
.block{
  width: 220px;
  height: 40px;
}
#gongNengS{
  list-style: none;
  display: flex;
  padding: 0;
}
#gongNengS>li{
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border:1px solid gray;

}
li:hover{
  background: #CCCCCA;
}
.active{
  background: #CCCCCA;
}
.table{
  margin-top:10px;
}
.fenYe{
  margin-top:20px;
}
</style>